/*
  学习目标：React的条件渲染
  1. if else语句
  2. 三元
  3. 逻辑运算符
*/

import React from 'react';
import ReactDOM from 'react-dom';

// 需求：通过isShow变量，控制是否加载中
const isShow = true;

//   1. if else语句 🔔往往配合函数使用
function showLoading() {
  if (isShow) {
    return <h1>数据正常显示</h1>;
  } else {
    return <h2>加载中...</h2>;
  }
}

const divNode = (
  <>
    {showLoading()}
    <div>{isShow ? <h1>数据正常显示</h1> : <h2>加载中...</h2>}</div>
    {/* 2. 三元 */}
    <div>{isShow && <h1>数据正常显示</h1>}</div>
    {/*   3. 逻辑运算符 */}
    <div>{!isShow && <h2>加载中...</h2>}</div>
  </>
);

ReactDOM.render(divNode, document.getElementById('root'));
